<template>
	<view>
		<view>scroll-view纵向滚动</view>
		<scroll-view class="scroll-y" scroll-y="true" >
			<view class="bg-bule item">A</view>
			<view class="bg-green item">B</view>
			<view class="bg-red item">C</view>
		</scroll-view>
		<view>scroll-view横向滚动</view>
		<scroll-view class="scroll-x" scroll-y="true" >
			<view class="bg-bule item2">Aaaaa</view>
			<view class="bg-green item2">B</view>
			<view class="bg-red item2">C</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.item{
		height: 200upx;
	}
	.item2{
		height: 200upx;
		display: inline-block;/*子内容显示在一行*/
		width: 100%;
	}
	.bg-bule{
		background-color: #007aff;
	}
	.bg-gree{
		background-color: #4cd964;
	}
	.bg-red{
		background-color: #aa0000;
	}
	.scroll-y{
		height: 200upx;
	}
	.scroll-x{
		white-space: nowrap;
	}
</style>
